/**
 * 时间：2021-06-08
 * 作者：韩万路
 * 公司：中亿丰信息
 * 名称：svg中的字段模块
 * 功能：主要是主要模块的组件
 * 优先级:高
 */

Vue.component("space_component_field", {
    data() {
        return {
            id: this.toUuid,
            uuid: this.toUuid, //动态数字名称

            name: "space_component_field", //当前的名称是模块的名称

            parentName: "", //当前父级模块名称

            childrenNodeArray: [], //当前子集的name数组


            //缓存过度动画内容
            animationData:{
                x:0,
                y:0,
                opacity:1,
            },




            data: {
                btnRight:true,//当前左右按钮点击
                btnLeft:true,

                thisShrink:false,    //当前是否在收缩
                isShow:true,       //当前是否隐藏 || 是否启动动画数据
                isAnimation:false,  //是否使用animation动画数据

                opacity:1,          //透明度
                childrenListId:[],  //他的继承类
                linkTo:"",          //linkTO链接到哪里的id只能有一个

                position: {
                    x: 0,
                    y: 0,
                },
                innerSize: {
                    width: 410,
                    width2: 40,
                    height: 95,  //95    115   /140
                },
                parentId: "",   //父级的编号

                name: "字段名称!!!!!",
                privilege:{     //当前配置设置
                    must:false, 
                    search:false,
                    index:false,
                    reserve:false,
                    copy:false,
                },
                tag:"",
                fieldType:{
                    name:"二进制",
                    value:"binary",
                },

                //关联的模型名称
                link_model:{
                    id:"",
                    name:"",
                },          
                //关联的模型字段
                link_field:{
                    id:"",
                    name:"",
                },     
                //大小
                size:0,     
                
                //域过滤
                region_filtration:"",
                //在删除时
                deleting:{
                    name:"null",
                    value:"null",
                },
                //可翻译
                translate:false,






                
            },


            data_on_childrenShrinkage: true, //当前的子集是否隐藏  true 是不隐藏

        }
    },
//     <text   text-rendering="inherit" dominant-baseline="text-before-edge"
//     :font-size="data.font_size" :y="10"  :x="data.font_size" 
//     :w="computed_textWidth"
//  >
//     文本域{data.text}!
// </text>


    template: `
        <g 
            :id="computed_toUuid" 
            class="movetrue" 
            :class="name"
            :transform="'matrix( 1 0 0 1 '+ 
            (data.isAnimation?animationData.x:data.position.x)  +' '+ 
            (data.isAnimation?animationData.y:data.position.y) +' )'"


            :opacity="data.isAnimation?animationData.opacity:data.opacity"

            style="z-index:999"

            :thisShrink="computed_thisShrink"   
            :v-show="data.isShow"
        >

        <!--主要显示内容的框架-->
            <rect 
                class="fil2 str2" 
                x="0" 
                y="0" 
                :width="computed_textWidth" 
                :height="computed_height" 
                rx="6" 
                ry="6"  
                stroke="rgba(57, 80, 96,0)" 
                stroke-width="3" 
                fill="#ffffff" 
                filter="url(#dropshadow)" 
                >

            </rect>    

            <foreignObject 
                :x="-30 - 5" 
                :y="0" 
                :width="computed_textWidth + 30*2 + 5*2" 
                :height="computed_height" 
                style="position:absolute"
                class="foreignObject"
            >
                <!--主要内容-->
                <div class="foreignObject-header">
                    <div class="foreignObject-icon logo-icon-field"></div>
                    <div class="foreignObject-name"
                        style="
                            
                        "
                    >文本域{data.name}!</div>
                    <div class="foreignObject-group">文本域{data.fieldType.name}!</div>
                    <div class="foreignObject-group" v-if="data.tag != ''">
                        <span class="foreignObject-tag"  :name="'tag'" >文本域{data.tag}!</span>
                    </div>
                    <div class="foreignObject-group">
                        <div class="foreignObject-icon icon-must"   :class="!data.privilege.must?'icon-filter-none':''"></div>
                        <div class="foreignObject-icon icon-search"  :class="!data.privilege.search?'icon-filter-none':''"></div>
                        <div class="foreignObject-icon icon-index"   :class="!data.privilege.index?'icon-filter-none':''"></div>
                    </div>



<!--
<button 
    class="btn-add  btn-icon-jurisdictionadd"
    v-on:click="fun_on_createChildren(null)"
></button>
<button 
    class="btn-add  btn-icon-fieldadd"
    v-on:click="fun_on_createChildren(null)"
></button>
-->
                </div>
                <!--扩展解释-->
               
                <!--左右按钮-->
                <div class="">
<!--<button class="btn-add  btn-icon-link-left" :style="{transform:data.btnLeft?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(false)"></button>-->
<!--<button class="btn-add  btn-icon-link-right" :style="{transform:data.btnRight?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(true)"></button>-->
                </div>
              
            </foreignObject>

            <!--次要显示内容的框架-->

            <g 

            


                v-show="
                    data.fieldType.value=='many2many' ||
                    data.fieldType.value=='many2one' ||
                    data.fieldType.value=='many2one_reference' ||
                    data.fieldType.value=='one2many'
                "
            >
               
            </g>

            


        </g>
    `,
    props: ["toUuid","modelType"],
    computed: {
        /**
         * 计算属性  : 计算当前宽度多少
         * @returns 
         */
        computed_textWidth: function() {
            //字体长度 乘以 字体大小 加上边框
            // let width = this.data.text.length * this.data.font_size + (20 * 2);

            // //减去字是否是英文和标点符号
            // let charCodeLine = 0;
            // for (let index in this.data.text) {
            //     if (this.data.text[index].charCodeAt() <= 200) {
            //         charCodeLine++;
            //     }
            // }
            // //当前的英文标点符号乘以字体大小除以2半个字符
            // width -= (charCodeLine * this.data.font_size) / 2;

            // //外加设备信息
            // width += 0;

            // this.data.innerSize.width = width;
            return this.data.innerSize.width;
        },
        computed_toUuid: function() {

            this.fun_thisToChildren();
            return this.toUuid;
        },
        /**
         * 
         * @returns 
         */
        computed_childrenLength: function() {

            return Object.keys(this.childrenNodeArray).length;
        },
        /**
         * 计算height高度的内容
         */
        computed_height:function()
        {
            let height  = 50;
            //同步下数字

            this.data.innerSize.height = height;

            return height;
        },
        /**
         * 是否收缩动态的内容
         */
        computed_thisShrink:function(){
            //收缩函数
            if (this.data.thisShrink)
            //是收缩
            {
              
            }else
            //不是收缩
            {

                

            };



        }
    },
    methods: {


        /**
         * 获取数据
         */
        fun_getData() {
            return this.data;
        },
        /**
         * 插入数据 覆盖
         */
        fun_setData(data) {
            let newData = {...this.data,...data};
            this.data = newData;

        },
        /**
         * 初始化创建的时候获取main里面的server和app里面的值并且传入到当前
         */
        fun_initGetMainData:function(){
            //获取创建时的内存地址
            let mainData = main.requestData[this.modelType][this.id].data;
            //吧获取的数据同步到当前
            this.fun_setData(mainData);
            //吧同步后的数据发送到main里面
            this.$set(
                main.requestData[this.modelType][this.id],
                "data",
                this.fun_getData()
            );
            
            this.fun_registerToParent();
            //初始化完毕更新线段
            main.fun_component_updateLink();

        },

        /**
         * 发送当前的this到外部
         */
        fun_thisToChildren: function() {
            // this.$emit('increase', this);
        },
        
        /**
         * 点击执行children收缩
         */
        fun_on_childrenShrinkage: function(isRight) {
            if(isRight)
            {
                this.data.btnRight = !this.data.btnRight;
            }else
            {
                this.data.btnLeft = !this.data.btnLeft;
            }
        },
        /**
         * 创建内容
         */
        fun_on_createChildren(craeteComponentName)
        {   
            main.fun_component_addChildren(this.id,craeteComponentName);
        },
        fun_registerToParent:function(){
            
            //吧当前的id传入到父级里面
            //获取父级的数据
            let parentData = main.requestData[main.requestData.modelType][this.data.parentId].data;
            //判断当前父级是否有相同的内容否则不予添加
            let index = parentData.childrenListId.indexOf(this.id);
            if(index == -1)
            {
                // debugger;
                parentData.childrenListId.push(this.id);
            }

        },
        /**
         * 获取所有子集的x和y列表
         */
         fun_get_childrenAllPosition:function()
         {
 
             let childrenAllData  = [];
             let childrenAllPosition = [];
 
             for (let i = 0; i < this.data.childrenListId.length; i++) {
                 let childrenId = this.data.childrenListId[i];
 
                 childrenAllData.push(
                     main.requestData[main.requestData.modelType][childrenId].data
                 );
                 childrenAllPosition.push(
                     main.requestData[main.requestData.modelType][childrenId].data.position
                 );
                 
             }
 
             return{
                 childrenAllData:childrenAllPosition,
                 childrenAllPosition:childrenAllPosition,
             }
 
         },


    },
    //监听xy的移动位置
    watch:{
        'data.position.x':function(newVal,oldVal)
        {
            // console.log(newVal - oldVal);
            let cha = (newVal - oldVal);
            // 当前鼠标按下才可执行当前内容
            if(main.mouse_isDown)
            {
                 //获取当前所有子集的x;
                let {childrenAllPosition} = this.fun_get_childrenAllPosition();
                for (let i = 0; i < childrenAllPosition.length; i++) {
                    const itemPosition = childrenAllPosition[i];

                    itemPosition.x  = itemPosition.x + cha ;
                    // itemPosition
                }

            }
           
        },
        'data.position.y':function(newVal,oldVal)
        {
            // console.log(newVal - oldVal);
            // 当前鼠标按下才可执行当前内容
            if(main.mouse_isDown)
            {
                let cha = (newVal - oldVal);
                //获取当前所有子集的x;
                let {childrenAllPosition} = this.fun_get_childrenAllPosition();
                for (let i = 0; i < childrenAllPosition.length; i++) {
                    const itemPosition = childrenAllPosition[i];

                    itemPosition.y  = itemPosition.y + cha ;
                    // itemPosition
                }
            }
        },
        'data.fieldType.value':function(newVal,oldVal)
        {
            //监听当前选择的内容并且是否创建的线条内容



            if (
                this.data.fieldType.value=='many2many' ||
                this.data.fieldType.value=='many2one' ||
                this.data.fieldType.value=='many2one_reference' ||
                this.data.fieldType.value=='one2many'
            ){
                //创建线条

                //判断需不需要在此创建了
                if(main.requestData[main.requestData.modelType][this.id+"_linkTo"] == undefined)
                { 
                    main.fun_component_addChildren(this.id,"space_component_linkTo",this.id+"_linkTo");
                }
                

            }else
            {
                //删除线条
                // main.fun_component_addChildren(this.id,);
                main.fun_component_remChildren(this.id+"_linkTo");
                this.data.linkTo = "";



            }





        }
    },
    created() {
        //创建完毕后插入到当前对象
        this.fun_initGetMainData();

        //创建完毕后刷新当前线
        main.fun_component_updateLink();
            

    }

});













/**
 *  当前模块的属性设置
 *  space_component_mode_properties
 */

 Vue.component("space_component_field_properties",{
    props:[
        "thisObject"
    ],
    data:function(){
        return{
            fieldTypes:[
                {
                    name:"二进制",
                    value:"binary",
                },
                {
                    name:"布尔型函数",
                    value:"boolean",
                },
                {
                    name:"字符",
                    value:"char",
                },
                {
                    name:"日期",
                    value:"date",
                },
                {
                    name:"日期时间",
                    value:"datetime",
                },
                {
                    name:"浮点型",
                    value:"float",
                },
                {
                    name:"html",
                    value:"html",
                },
                {
                    name:"整数",
                    value:"integer",
                },
                {
                    name:"多对多",
                    value:"many2many",
                },
                {
                    name:"多对一",
                    value:"many2one",
                },
                {
                    name:"many2one_reference",
                    value:"many2one_reference",
                },
                {
                    name:"货币",
                    value:"monetary",
                },
                {
                    name:"一对多",
                    value:"one2many",
                },
                {
                    name:"参考",
                    value:"reference",
                },
                {
                    name:"选择项",
                    value:"selection",
                },
                {
                    name:"文本",
                    value:"text",
                }
            ],
            deletings:[
                
                {
                    name:"null",
                    value:"null",
                },
                {
                    name:"级联",
                    value:"cascade",
                },
                {
                    name:"设置为空",
                    value:"SetTheEmpty",
                },
                {
                    name:"限制",
                    value:"astrict",
                }
            ]
        }
    },
    template:`
    <div class="properties-group" >
        <p class="properties-content properties-weight"><span>[字段]特有属性</span></p>
        <p class="properties-content">
            <span>字段名称</span>
            <input type="text" placeholder="请输入字段名称" v-model="thisObject.data.name" />
        </p>
        <p class="properties-content">
            <span>字段标签</span>
            <input type="text"  v-model="thisObject.data.tag"    placeholder="请输入字段标签" />
        </p>

        <p class="properties-content">
            <span>字段类型</span>
            <select  v-model="thisObject.data.fieldType ">
                <option :value="item" v-for="(item , index) in fieldTypes" >文本域{item.name}!</option>
            </select>
        </p>

        <p class="properties-content">
            <span>必须的</span>
            <input type="checkbox" v-model="thisObject.data.privilege.must"  
            
            
             checked />
        </p>
        <p class="properties-content">
            <span>只读</span>
            <input type="checkbox" v-model="thisObject.data.privilege.search"   checked />
        </p>
        
        <p class="properties-content">
            <span>储存</span>
            <input type="checkbox" v-model="thisObject.data.privilege.reserve"   checked />
        </p>
        <p class="properties-content">
            <span>索引</span>
            <input type="checkbox"  v-model="thisObject.data.privilege.index"  checked />
        </p>
        <p class="properties-content">
            <span>复制</span>
            <input type="checkbox" v-model="thisObject.data.privilege.copy"   checked />
        </p>

        <hr/>

        <p class="properties-content"    
            v-if = "
                thisObject.data.fieldType.value == 'char'
                || thisObject.data.fieldType.value == 'html'
                || thisObject.data.fieldType.value == 'text'
            "
        >
            <span>可翻译</span>
            <input type="checkbox"  v-model="thisObject.data.translate"  />
        </p>

        <p class="properties-content"    
            v-if = "
                thisObject.data.fieldType.value == 'char'
                || thisObject.data.fieldType.value == 'reference'
                
            "
        >
            <span>大小</span>
            <input type="number"  v-model="thisObject.data.size"   placeholder="大小设置" />
        </p>

        <p class="properties-content"
                v-if = "
                    thisObject.data.fieldType.value == 'many2many'
                    || thisObject.data.fieldType.value == 'many2one'
                    || thisObject.data.fieldType.value == 'one2many'

                    
                "
        >
            <span>关联模型</span>
            <select v-model="thisObject.data.link_model"  >
                <option>请选择模型</option>
                <option v-for="(item , index) in computed_modelKV"  :value="item">文本域{item.name}!</option>
            </select>
        </p>
        
        <p class="properties-content"
            v-if = "
                thisObject.data.fieldType.value == 'one2many'
            "
        
        >
            <span>关联字段</span>
            <select     v-model="thisObject.data.link_field" >
                <option>请选择字段</option>
                <option v-for="(item , index) in computed_fieldKV"  :value="item">文本域{item.name}!</option>
            </select>
        </p>

        <p class="properties-content"
            v-if = "
                thisObject.data.fieldType.value == 'many2one'
            "
        
        >
            <span>在删除时</span>
            <select   v-model="thisObject.data.deleting" >
                <option v-for="(item , index) in deletings"  :value="item">文本域{item.name}!</option>
            </select>
        </p>

        <p class="properties-content"
            v-if = "
                thisObject.data.fieldType.value == 'many2many'
                || thisObject.data.fieldType.value == 'many2one'
                || thisObject.data.fieldType.value == 'one2many'
                
            "
        
        >
            <span>域(过滤)</span>
            <input type="text"  v-model="thisObject.data.region_filtration"   placeholder="过滤程序" />
        </p>
        
    </div>
    `,
    methods:{
        
    },
    computed:{
        computed_modelKV:function(){

            let requestData = main.requestData[main.requestData.modelType];
            let requestParse =[];
            for (const key in requestData) {
                if(requestData[key].component == "space_component_mode")
                {

                    requestParse.push({
                        id:key,
                        name:requestData[key].data.name,
                    });


                }
            }


            console.log("-------------------------",requestParse)
            return requestParse;

        },
        computed_fieldKV:function(){

            let requestData = main.requestData[main.requestData.modelType];
            let requestParse =[];
            for (const key in requestData) {
                if(requestData[key].component == "space_component_field")
                {

                    requestParse.push({
                        id:key,
                        name:requestData[key].data.name,
                    });


                }
            }


            console.log("-------------------------",requestParse)
            return requestParse;


        }
    },
    created()
    {
        console.log("0---------------------",this.thisObject);
    },


});